<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.lunBo {
			position: relative;
			width: 520px;
			height: 280px;
			margin: 80px auto;
		}

		.prevLeft {  
			position: absolute;
			left: 0px;
			/* 让这个垂直居中 */
			top: 50%;
			/* margin-top: -15px; */
			width: 20px;
			height: 30px;
			line-height: 30px;
			background-color: rgba(0, 0, 0, 0.3);
			text-decoration: none;
			text-align: center;
			/* 设置圆角边框 */
			border-radius: 0 15px 15px 0;
		}

		.prevRight {
			position: absolute;
			right: 0px;
			/* 让这个垂直居中 */
			top: 50%;
			/* margin-top: -15px; */
			width: 20px;
			height: 30px;
			line-height: 30px;
			background-color: rgba(0, 0, 0, 0.3);
			text-decoration: none;
			text-align: center;
			/* 设置圆角边框 */
			border-radius: 15px 0 0 15px;
		}

		a {
			color: #fff;
			text-decoration: none;
		}

		/*还 利用并集选择器可以将 prevLeft 和 prevRight 弄到一起，以此来减少代码量 */
		.yuandian ul {
			position: absolute;
			bottom: -8px;
			left: 40%;
			/* margin-left: 7px; */
			width: 80px;
			height: 13px;
			background-color: rgba(255, 255, 255, 0.3);
		}

		li {
			list-style: none;
		}

		.yuandian ul li {
			float: left;
			width: 8px;
			height: 8px;
			margin-left: 8px;
			background-color: #fffefe;
			border-radius: 4px;
		}

		.yuandian ul li:hover {
			background-color: rgb(236, 27, 27);
		}
	</style>
</head>

<body>
	<div class="lunBo">
		<img src="images/tb.jpg" alt="">
		<!-- 轮播图左边 -->
		<div class="prevLeft">
			<a href="#">&lt;</a>
		</div>
		<!-- 轮播图右边 -->
		<div class="prevRight">
			<a href="#">&gt;</a>
		</div>
		<!-- 小圆点 -->
		<div class="yuandian">
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</div>

</body>

</html>